<template>
  <div class="left-params">
    <el-scrollbar class="scroll-bar">
      <XcTable labelWidth="80px" :config="config" :value="detail" type="descriptions" :border="true" ref="tableView">
        <!-- <template #title>
          <span>测试状态{{ testStatus }}</span>
        </template> -->
        <template #progress>
          <el-progress :percentage="detail.progress"></el-progress>
        </template>
      </XcTable>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import type { Environment } from "../../api/test/index.d";
import { getEnvironment, getTestStatisticsInfo } from "../../api/test/index";
import { useRoute } from "vue-router";
import { computed } from "vue";

const props = defineProps<{
  testStatus: number;
  required: true;
}>();

const route = useRoute();

const config = computed(() => {
  return [
    {
      label: props.testStatus === 1 ? "测试情况统计" : "测试情况",
      type: "title",
    },
    { label: "测试进度", prop: "progress", type: "slot", slot: "progress" },
    { label: "测试时长", prop: "time" },
    { label: "测试环境", type: "title" },
    { label: "温度", prop: "temperature" },
    { label: "湿度", prop: "humidity" },
    { label: "大气压", prop: "pressure" },
    { label: "风向", prop: "windDirection" }
  ]
}
);

const detail = ref<Partial<Environment>>({});
const setData = (data: Environment) => {
  detail.value = { ...detail.value, ...data };
};
const getData = async () => {
  const { data } = await getEnvironment({}, { taskId: route.query.taskId });

  setData(data);

  const result = await getTestStatisticsInfo({}, { taskId: route.query.taskId });
  if (!result.data || result.data.progress === undefined || result.data.time === undefined) {
    return;
  }
  detail.value.progress = result.data.progress;
  detail.value.time = result.data.time;
};

watch(
  () => props.testStatus,
  () => {
    console.log("测试状态变化", props.testStatus);
    getData();
  },
  { immediate: true }
);

defineExpose({ setData, getData });
</script>

<style lang="scss" scoped>
.left-params {
  background-color: #fff;
  height: 100%;

  .scroll-bar {
    height: 100%;
  }

  :deep(.el-progress) {
    .el-progress__text {
      min-width: 26px;
      font-size: 12px !important;
    }
  }
}
</style>
